<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>学生管理</title>
        <!-- <link rel="stylesheet" href="../layui/css/layui.css" /> -->
        <style>
            .type {
                width: 100px;
            }
            .value {
                width: 300px;
            }
            .addForm{
                padding:20px;
            }
        </style>
    </head>
    <body>
        <table id="studentTable" lay-filter="studentTable"></table>
        <script type="text/html" id="tools">
                <form class="layui-form" lay-filter="searchForm">
              <div class="layui-input-inline">
                  <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
                      <i class="layui-icon">&#xe654;</i>
                </button>
              </div>
                  <div class="layui-input-inline type">
                  <select name="type" >
                      <option value="name">姓名</option>
                      <option value="gender">性别</option>
                      <option value="age">年龄</option>
                    </select>
                  </div>
                  <div class="layui-input-inline value">
                      <input type="text" name="value" placeholder="请输入搜索条件" class="layui-input">
                  </div>
                  <div class="layui-input-inline">
                      <button type="button" lay-event="search" class="layui-btn layui-btn-primary layui-btn-sm">
                          <i class="layui-icon">&#xe615;</i>
                        </button>
                  </div>
            </div>
        </form>
        </script>
        <!-- <div id="addContent" style="display:none">
            
        </div> -->
        <script type="text/html" id="action">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
                >删除</a
            >
        </script>
       
        <!-- <script src="../layui/layui.js"></script>
        <script src="../js/mock-min.js"></script>
        <script src="../lesson13/data.js"></script> -->
        
        <script src="../lesson13/data.js"></script>
        <script>
            layui.define(function () {
                let { $, table,layer,form } = layui;
                table.render({
                    elem: "#studentTable",
                    url: "/findStudents", //数据接口
                    method: "post",
                    contentType: "application/json",
                    toolbar: "#tools",
                    cols: [
                        [
                            //表头
                            {
                                field: "name",
                                title: "姓名",
                            },
                            { field: "gender", title: "性别" },
                            {
                                field: "age",
                                title: "年龄",
                            },
                            {
                                title: "操作",
                                templet: "#action",
                            },
                        ],
                    ],
                });
                table.on('toolbar(studentTable)', function(obj){
                    if(obj.event == "add"){
                        layer.open({
                            type: 1, 
                            title:"增加学生",
                            btn:['确定','取消'],
                            success:function(){
                                form.render();
                            },
                            yes:function(index){
                                $.ajax({
                                    type:"post",
                                    url:"/addStudent",
                                    data:form.val("addForm"),
                                    processData:false,
                                    dataType:"json",
                                    success(){
                                        table.reload("studentTable",{
                                            where:{}
                                        });
                                        layer.close(index);
                                    }
                                });
                               
                            },
                            content: `
                            <form class="layui-form addForm" lay-filter="addForm" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">姓名</label>
                                    <div class="layui-input-block">
                                        <input
                                            type="text"
                                            name="name"
                                            required
                                            lay-verify="required"
                                            placeholder="请输入姓名"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">年龄</label>
                                    <div class="layui-input-block">
                                        <input
                                            type="text"
                                            name="age"
                                            required
                                            lay-verify="required"
                                            placeholder="请输入年龄"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-block">
                                    <input type="radio" name="gender" value="男" title="男">
                                    <input type="radio" name="gender" value="女" title="女">
                                    </div>
                                </div>
                            </form>
                            `
                        });
                    }else if(obj.event == "search"){
                        // 搜索
                        table.reload("studentTable",{
                            where:form.val("searchForm")
                        });
                    }
                })
                table.on('tool(studentTable)', function(obj){
                    if(obj.event == "del"){
                        layer.confirm('是否删除?', function(index){
                            $.ajax({
                                type:"post",
                                url:"/delStudent",
                                processData:false,
                                dataType:"json",
                                data:{
                                    id:obj.data.id
                                },
                                success(){
                                    layer.close(index);
                                    table.reload("studentTable");
                                }
                            });
                            
                        });  
                    }else if(obj.event == "edit"){
                        layer.open({
                            type: 1, 
                            title:"修改学生",
                            btn:['确定','取消'],
                            success:function(){
                                form.render();
                                $.ajax({
                                    type:"post",
                                    url:"/findById",
                                    processData:false,
                                    dataType:"json",
                                    data:{
                                        id:obj.data.id
                                    },
                                    success(res){
                                        form.val("updateForm",res.student);
                                    }
                                });
                                
                            },
                            yes:function(index){
                                $.ajax({
                                    type:"post",
                                    url:"/updateStudent",
                                    data:{
                                        id:obj.data.id,
                                        ...form.val("updateForm")
                                    },
                                    processData:false,
                                    dataType:"json",
                                    success(){
                                        table.reload("studentTable");
                                        layer.close(index);
                                    }
                                });
                               
                            },
                            content: `
                            <form class="layui-form addForm" lay-filter="updateForm" action="">
                                
                                <div class="layui-form-item">
                                    <label class="layui-form-label">姓名</label>
                                    <div class="layui-input-block">
                                        <input
                                            type="text"
                                            name="name"
                                            required
                                            lay-verify="required"
                                            placeholder="请输入姓名"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">年龄</label>
                                    <div class="layui-input-block">
                                        <input
                                            type="text"
                                            name="age"
                                            required
                                            lay-verify="required"
                                            placeholder="请输入年龄"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-block">
                                    <input type="radio" name="gender" value="男" title="男">
                                    <input type="radio" name="gender" value="女" title="女">
                                    </div>
                                </div>
                            </form>
                            `
                        });
                    }
                })

                
            });
        </script>
       
    </body>
</html>
